  <template>
    <base-layout>
      <template #searchPanel>
        <search-panel
          v-slot="{ form }"
          :selectPer="'sh:order:dj:page'"
          :excelPer="'sh:order:dj:export'"
          @search="search"
          @handleDataExport="handleDataExport"
          :showSearchButton="true"
          :showExportButton="true"
          @export="excelInfo"
        >
          <el-date-picker
            v-model="form.paymentTime"
            type="datetimerange"
            start-placeholder="缴纳开始时间"
            end-placeholder="缴纳结束时间"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          />
          <el-select
            clearable
            style="width: 150px"
            v-model="form.carBrandId"
            placeholder="请选择品牌"
            @change="handleCarBrand"
          >
            <el-option
              v-for="item in allBrand"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-select
            clearable
            style="width: 150px"
            v-model="form.carSeriesId"
            placeholder="请选择车系"
          >
            <el-option
              v-for="item in allSeries"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <job-shop style="width: 150px;" v-model="form.storeId" placeholder="销售门店" />
          <el-select
            clearable
            style="width: 150px"
            v-model="form.saleId"
            placeholder="销售顾问"
          >
            <el-option
              v-for="item in dataArry"
              :key="item.index"
              :value="item.id"
              :label="item.userName"
            />
          </el-select>
          <el-select
            clearable
            style="width: 150px"
            v-model="form.orderCategory"
            placeholder="订单类别"
          >
            <el-option
              v-for="item in getDict(['订单类别'])['订单类别']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
          <el-input
            v-model="form.client"
            clearable
            placeholder="客户名称/手机号"
            style="width: 150px"
          />
        </search-panel>
      </template>
      <template #contentPanel>
        <data-table
          :value="tableData"
          :total-count="totalCount"
          :has-action="true"
          :table-column-attributes="tableColumnAttributes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :width="160"
        >
          <template #action="{ row }">
            <i
              class="el-icon-search"
              title="查看"
              style="margin-left: 15px; cursor: pointer"
              v-permission="'sh:order:dj:detail'"
              @click="handleDetails(row)"
            ></i>
          </template>
        </data-table>
      </template>
    </base-layout>
  </template>
  <script>
  import baseMixin from '@/mixins/base'
  import {
    getList
  } from '@/api/pre-sale/orderManagement/deposit'
  import { getDict, exportExcel } from '@/utils/index'
  import {
    getAllBrand,
    getSeries
  } from '@/api/after-sale/systemManage/carModel'
  import { getStoreUser } from '@/api/after-sale/personnel/index'
  export default {
    mixins: [
      baseMixin({
        idName: 'id',
        findData: getList,
        dataName: ['content', 'totalRecords'],
        format(res) {
          return res.map((data) => {
            data.payState = data.payState === 1 ? '已支付' : '未支付'
            return data
          })
        }
      })
    ],
    data() {
      return {
        allBrand: [], // 品牌
        allSeries: [], // 车系
        getDict: getDict,
        form: {
          storeId: '',
          client: '' // 客户信息
        },
        tableColumnAttributes: [
          {
            name: '订单号',
            value: 'depositOrderNo',
            type: 'text'
          },
          {
            name: '所属门店',
            value: 'storeName',
            type: 'text'
          },
          {
            name: '缴纳日期',
            value: 'paymentTime',
            type: 'text'
          },
          {
            name: '客户名称',
            value: 'clientName',
            type: 'text'
          },
          {
            name: '客户手机',
            value: 'clientPhone',
            type: 'text'
          },
          {
            name: '品牌',
            value: 'carBrandName',
            type: 'text'
          },
          {
            name: '车系',
            value: 'carSeriesName',
            type: 'text'
          },
          {
            name: '车型',
            value: 'carModelName',
            type: 'text'
          },
          {
            name: '订单类别',
            value: 'orderCategory',
            type: 'dict',
            dict: '订单类别'
          },
          {
            name: '总金额',
            value: 'money',
            type: 'text'
          },
          {
            name: '定金',
            value: 'deposit',
            type: 'text'
          },
          {
            name: '状态',
            value: 'payState',
            type: 'text'
          },
          {
            name: '销售门店',
            value: 'storeName',
            type: 'text'
          },
          {
            name: '销售顾问',
            value: 'saleManUser',
            type: 'text'
          }
        ],
        dict: {},
        dataArry: []
      }
    },
    methods: {
      async handleCarBrand(val) {
        val && await getSeries(val).then((res) => {
          const { success, data } = res
          if (success) this.allSeries = data
        })
      },
      // 查看员工信息
      handleDetails(row) {
        const { id } = row
        this.$router.push({
          name: 'deatailDepositOrder',
          params: { id }
        })
      },
      // 查询
      search(form) {
        if (form.paymentTime && form.paymentTime.length > 0) {
          form.paymentTimeStart = form.paymentTime[0]
          form.paymentTimeEnd = form.paymentTime[1]
        } else {
          form.paymentTimeStart = ''
          form.paymentTimeEnd = ''
        }
        delete form.paymentTime
        this.searchOptions = form
        this.currentPage = 1
        this.setTableData()
      },
      add() {
        this.$router.push({
          name: 'adddepositOrder',
          params: { type: 'add' }
        })
      },
      // 导出
      excelInfo() {
        exportExcel('DJOrder', '定金订单', { ...this.form }, this.pageSize, this.currentPage)
      }
    },
    async mounted() {
      await getAllBrand().then((res) => {
        const { success, data } = res
        if (success) this.allBrand = data
      })
      await getStoreUser().then((res) => {
        const { success, data } = res
        if (success) this.dataArry = data
      })
    }
  }
  </script>
